<template>
    <transition name="fade">
  <div class="container">
      <div class="header">
          <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
          <a class="center">所有订单</a>
      </div>
     <div class="list">
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x2件商品，共<span class="text-red">￥1998.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x1件商品，共<span class="text-red">￥999.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x1件商品，共<span class="text-red">￥999.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x1件商品，共<span class="text-red">￥999.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x1件商品，共<span class="text-red">￥999.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
         <div class="item">
             <div class="sn">20151545645465</div>
             <div class="detail">
                 <div class="img"><img src="../../assets/goods/1.jpg"></div>
                 <div class="info">
                     <p class="title">Nike air jordon 1 经典篮球鞋</p>
                     <p><small>颜色：黑，码数：42</small></p>
                 </div>
                 <div class="price-panel">
                     <p>￥999.00</p>
                     <p><small>x1</small></p>
                 </div>
             </div>
             <div class="total-price">
                 <small>x1件商品，共<span class="text-red">￥999.00</span>元</small>
             </div>
             <div class="ctrl">
                 <a class="btn btn-red">确认收货</a>
                 <a class="btn">查看物流</a>
                 <a class="btn">删除</a>
             </div>
         </div>
     </div>
  </div>
    </transition>
</template>

<script>
export default {
    name: 'confirm_order',
    data () {
        return {

        }
    },
    methods:{
		back:function ()
		{
			this.$router.back();
		}
    }

}
</script>

<style scoped>
    .btn-status{
        padding: 10px;
        width: 100px;
        margin: 0 auto;
    }
    .btn-status:after{
        content: "▼";
    }
    .list{
        margin-top: 60px;
    }
    .item{
        position: relative;
        border-bottom: 4px solid #f4f4f4;
    }
    .item .sn{
        padding:10px;
        color: #2c4f60;
        font-size: 0.9rem;
    }
    .item .detail{
        background: #f4f4f4;
        position: relative;
        overflow: hidden;
        height: 70px;
        padding: 10px;
        border-bottom: 2px dotted #fff;
    }
    .item .img{
        width: 70px;
        height: 70px;
        position: absolute;
        left: 0;
        top:0;
        padding: 10px;
        overflow: hidden;
    }
    .item .img img{
        height: 100%;
    }
    .item .info{
        margin-left: 70px;
        margin-right: 90px;
    }
    .item .price-panel{
        width: 90px;
        height: 70px;
        position: absolute;
        right: 0;
        top:0;
        padding: 10px;
        text-align: right;
    }
    .item .ctrl{
        padding: 8px;
        overflow: hidden;
    }
    .item .ctrl .btn{
        padding: 4px 12px;
        border:1px solid #ccc;
        text-align: center;
        border-radius: 2px;
        float: right;
        margin-right: 10px;
        font-size: 0.9rem;
    }
    .item .total-price{
        text-align: right;
        padding: 5px 10px;
    }
    .item .ctrl .btn-red{
        border: 1px solid #E30000;
        color: #E30000;
    }
</style>
